import React, { Component } from 'react'
import Pubsub from 'pubsub-js'
import axios from 'axios'
import './item.css'
import left from '../../static/image/leftArrow.png'
import right from  '../../static/image/rightArrow.png'
import refresh from '../../static/image/refresh.png'
import rain from '../../static/image/rain.png'
import thunderStorm from '../../static/image/thunderStorm.png'
import sunny from '../../static/image/sunny.png'
export default class WeatherItem extends Component {
    rain1 = rain
    thunderStorm1=thunderStorm
    sunny1 = sunny
    refresh1 =refresh

    state = {isShow:false,data:[{cityName:'Brisbane',img:this.rain1},{cityName:'Melbourne',img:thunderStorm},{cityName:'Sydney',img:sunny}],cityName:'Brisbane',
    activeIndex:0,isOnline:false}
 
    thunderStorm=thunderStorm
    changeLeft= ()=>{
      let {data,activeIndex:index} = this.state
      if(index<data.length-1){
          index++
      }else{
          index = 0
      }
    //   console.log(index)
    //   console.log(data[index].cityName)
      this.setState({
          cityName:data[index].cityName,
          activeIndex:index
      })
    }
    changeRight = ()=>{
        let {data,activeIndex:index} = this.state
        if(index>0){
            index--
        }else{
            index = data.length-1
        }
        // console.log(index)
        // console.log(data[index].cityName)
        this.setState({
            cityName:data[index].cityName,
            activeIndex:index
        })
    }
  async  componentDidMount(){
     
      Pubsub.subscribe('start',(msg,data)=>{
          this.setState({
              isShow:data
          })
      })
     let {data} = await axios.get("http://localhost:5200/weather.json")
     if(data){
         this.setState({
             data,
             isOnline:true
         })
     }
 
    }
    // switchWeather=(weather)=>{
    //     let res 
    //   switch (weather){
    //     case rain:
    //         console.log(11111)
    //         res = this.rain1
            
    //         break;
    //     case sunny:
    //         res = this.sunny1
    //         break;
    //     case thunderStorm:
    //         res = this.thunderStorm1
    //         break;
    //     case refresh:
    //         res = this.refresh1
    //         break;            
    //   }
    //   return res
      
    // }
    render() {
        // console.log(this)
        let {isOnline,data,activeIndex} = this.state
        let imgSrc = isOnline?data[activeIndex].img:refresh
        let res=imgSrc==='rain'?this.rain1:imgSrc==='sunny'?this.sunny1:imgSrc==='thunderStorm'?this.thunderStorm1:this.refresh1

    
        return (
            <div className="weather_item" style={{display:this.state.isShow?'block':'none'}}>
                <div className="cityName">{this.state.cityName}</div>
                <div className="operate">
                    <div className="left" onClick={this.changeLeft}><img src={left} alt="" /></div>
                    <div className="refresh"><img src={res} alt="" /></div>
                    <div className="right" onClick={this.changeRight}><img src={right} alt="" /></div>
                </div>
                <div style={{display:this.state.isOnline?'block':'none'}} className="ohterInfo">
                    <div className="temp">{data[activeIndex].temp}℃</div>
                    <div className="tempRange">
                        <div>{data[activeIndex].minTemp}℃</div>
                        <div>{data[activeIndex].maxTemp}℃</div>
                    </div>
                    <div className="desc">{data[activeIndex].desc}</div>

                </div>
            </div>
        )
    }
}
